<template>
    <div class="box">
        <div>
            <div v-if="img_url" class="bg-img" :style="`background-image: url(${props.article.cover_image})`">
            </div>
            <div v-else>
                <img src="../assets/icons/favsion.png" alt="封面">
            </div>
        </div>
        <div class="detils-box">
            <div>
                <h5>{{ article.title }}</h5>
                <p style="width: 510px;text-indent:2ch;word-wrap:normal;">{{ article.body }}</p>
            </div>
            <div class="bottom-box">
                <img src="../assets/icons/eye.svg" alt=""><span>{{ article.views }}</span>
                <img src="../assets/icons/question.svg" alt=""><span>{{ article.comments_counts }}</span>
                <p>{{ $t('articleItem.tags') }}{{ article.tags }}</p>
                <p>{{ $t('articleItem.author') }}{{ article.username }}</p>
                <p>{{ $t('articleItem.creatTime') }} {{ article.create_time }}</p>
                <div class="edit-box">
                    <div @click.stop="editArticle()">
                        <img src="../assets/icons/edit.svg" alt="修改">
                    </div>
                    <div @click.stop="delArticle()">
                        <img src="../assets/icons/del.svg" alt="删除">
                    </div>



                </div>

            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits, onMounted } from "vue"
import { useRouter } from 'vue-router'
import { ArticleStore } from '../store/articelStore/index'
const emit = defineEmits(['alram'])
const props = defineProps(["article"])
const img_url = ref(true)
const router = useRouter()
const articelStore = ArticleStore()

//前往编辑器进行编辑
function editArticle() {
    router.push({
        path: 'editor', query: { editType: "editArticle", article_id: props.article.article_id }
    })


}
//删除
async function delArticle() {
    emit("alram")
    articelStore.delArticleId = props.article.article_id;
}

onMounted(() => {
    if (props.article.cover_image.length < 8) {
        img_url.value = false
    }
})

</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    display: flex;
    background: $passlink-font-color-black;
    border-bottom: 2px solid $passlink-font-color-white;
    align-items: center;
    /* 控制元素在垂直方向上的对齐方式 */
    padding-top: 5px;

    .bg-img {
        transition: all .5s;
        width: 60px;
        height: 60px;
        background-size: cover;
        border-radius: 5px;
    }

    .bg-img:hover {
        
        box-shadow: 0 0 15px $passlink-font-color-white;
    }

    .bg-img:hover::before {
        transition: all .5s;
    }

    img {
        width: 60px;
        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.1), 2px 1px 5px 0px rgba(255, 255, 255, 0.1), 7px 4px 9px 0px rgba(255, 255, 255, 0.09), 16px 10px 12px 0px rgba(255, 255, 255, 0.05), 29px 18px 14px 0px rgba(255, 255, 255, 0.01), 46px 28px 15px 0px rgba(255, 255, 255, 0);
        border-radius: 5px;
    }

    .detils-box {
        margin-left: 10px;
        width: $passlink-center-width - 100px;
        color: $passlink-font-color-white;
        font-size: $passlink-font-size12;

        h5 {
            color: $passlink-font-color-yellow;
        }



        .bottom-box {
            display: flex;
            align-items: flex-start;
            /* 控制元素在垂直方向上的对齐方式 */
            width: 100%;

            span {
                font-weight: lighter;
                width: 40px;
            }

            p {
                margin-left: 20px;
                font-weight: lighter;
                width: 200px;
                text-align: left;
            }

            img {

                margin-left: 10px;
                width: 16px;
                height: 16px;
                box-shadow: none;
            }

            .edit-box {

                display: flex;
                width: 300px;
                justify-content: flex-end;

                img {
                    width: 30px;
                    height: 30px;
                    margin-left: 30px;
                    transition: all .5s;
                }

                img:hover {
                    width: 33px;
                    height: 33px;
                    box-shadow: 0 0 15px $passlink-font-color-white;
                }

                img:hover::before {
                    transition: all .5s;
                }


            }
        }

    }
}</style>
